<template>
    <view class="vk-data-goods-sku-popup" catchtouchmove="true" :class="valueCom && complete ? 'show' : 'none'"
        @touchmove.stop.prevent="moveHandle" @click.stop="stop">
        <!-- 页面内容开始 -->
        <view class="mask" @click="close('mask')"></view>
        <view class="layer attr-content" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }"
            :style="{ borderRadius: borderRadius + 'rpx ' + borderRadius + 'rpx 0 0' }">
            <view class="specification-wrapper">
                <scroll-view class="specification-wrapper-content" scroll-y="true">
                    <view class="specification-header">
                        <view class="specification-left">
                            <image class="product-img"
                                :src="selectShop.image ? selectShop.image : goodsInfo[goodsThumbName]"
                                :style="{ backgroundColor: goodsThumbBackgroundColor }" mode="aspectFill"
                                @click="previewImage"></image>
                        </view>
                        <view class="specification-right">
                            <view class="price-content" :style="{ color: themeColorFn('priceColor') }">
                                <text class="sign">¥</text>
                                <text class="price" :class="priceCom.length > 16 ? 'price2' : ''">{{ priceCom }}</text>
                            </view>
                            <view class="inventory" v-if="!hideStock">{{ stockText }}：{{ stockCom }}</view>
                            <view class="inventory" v-else></view>
                            <view class="choose" v-show="isManyCom">已选：{{ selectArr.join(' ') }}</view>
                        </view>
                    </view>

                    <view class="specification-content">
                        <view v-show="isManyCom" class="specification-item"
                            v-for="(item, index1) in goodsInfo[specListName]" :key="index1">
                            <view class="item-title">{{ item.name }}</view>
                            <view class="item-wrapper">
                                <view class="item-content" v-for="(item_value, index2) in item.list" :key="index2"
                                    :class="[item_value.ishow ? '' : 'noactived', subIndex[index1] == index2 ? 'actived' : '']"
                                    :style="[
                                        item_value.ishow ? '' : themeColorFn('disableStyle'),
                                        item_value.ishow ? themeColorFn('btnStyle') : '',
                                        subIndex[index1] == index2 ? themeColorFn('activedStyle') : ''
                                    ]" @click="skuClick(item_value, index1, index2)">
                                    {{ item_value.name }}
                                </view>
                            </view>
                        </view>
                        <view class="number-box-view">
                            <view style="flex: 1;">数量</view>
                            <view style="flex: 4;text-align: right;">
                                <vk-data-input-number-box v-model="selectNum" :min="minBuyNum || 1" :max="maxBuyNumCom"
                                    :step="stepBuyNum || 1" :step-strictly="stepStrictly" :positive-integer="true"
                                    @change="numChange"></vk-data-input-number-box>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view class="close" @click="close('close')" v-if="showClose != false">
                    <image class="close-item" :src="closeImage"></image>
                </view>
            </view>

            <view class="btn-wrapper" v-if="outFoStock || mode == 4">
                <view class="sure" style="color:#ffffff;background-color:#cccccc">{{ noStockText }}</view>
            </view>
            <view class="btn-wrapper" v-else-if="mode == 1">
                <view class="sure add-cart" style="border-radius:38rpx 0rpx 0rpx 38rpx;" :style="{
                    color: themeColorFn('addCartColor'),
                    backgroundColor: themeColorFn('addCartBackgroundColor')
                }" @click="addCart">
                    {{ addCartText }}
                </view>

                <view class="sure" style="border-radius:0rpx 38rpx 38rpx 0rpx;" :style="{
                    color: themeColorFn('buyNowColor'),
                    backgroundColor: themeColorFn('buyNowBackgroundColor')
                }" @click="buyNow">
                    {{ buyNowText }}
                </view>
            </view>
            <view class="btn-wrapper" v-else-if="mode == 2">
                <view class="sure add-cart" :style="{
                    color: themeColorFn('addCartColor'),
                    backgroundColor: themeColorFn('addCartBackgroundColor')
                }" @click="addCart">
                    {{ addCartText }}
                </view>
            </view>
            <view class="btn-wrapper" v-else-if="mode == 3">
                <view class="sure" :style="{
                    color: themeColorFn('buyNowColor'),
                    backgroundColor: themeColorFn('buyNowBackgroundColor')
                }" @click="buyNow">
                    {{ buyNowText }}
                </view>
            </view>
        </view>
        <!-- 页面内容结束 -->
    </view>
</template>

<script>
var vk; // vk依赖
var goodsCache = {}; // 本地商品缓存
export default {
    name: 'vk-data-goods-sku-popup',
    emits: ['update:modelValue', 'input', 'update-goods', 'open', 'close', 'add-cart', 'buy-now', 'cart', 'buy', 'num-change'],
    props: {
        // true 组件显示 false 组件隐藏
        value: {
            Type: Boolean,
            default: false
        },
        modelValue: {
            Type: Boolean,
            default: false
        },
        // vk云函数路由模式参数开始-----------------------------------------------------------
        // 商品id
        goodsId: {
            Type: String,
            default: ''
        },
        // vk路由模式框架下的云函数地址
        action: {
            Type: String,
            default: ''
        },
        // vk云函数路由模式参数结束-----------------------------------------------------------
        // 该商品已抢完时的按钮文字
        noStockText: {
            Type: String,
            default: '该商品已抢完'
        },
        // 库存文字
        stockText: {
            Type: String,
            default: '库存'
        },
        // 商品表id的字段名
        goodsIdName: {
            Type: String,
            default: '_id'
        },
        // sku表id的字段名
        skuIdName: {
            Type: String,
            default: '_id'
        },
        // sku_list的字段名
        skuListName: {
            Type: String,
            default: 'sku_list'
        },
        // spec_list的字段名
        specListName: {
            Type: String,
            default: 'spec_list'
        },
        // 库存的字段名 默认 stock
        stockName: {
            Type: String,
            default: 'stock'
        },
        // sku组合路径的字段名
        skuArrName: {
            Type: String,
            default: 'sku_name_arr'
        },
        // 默认单规格时的规格组名称
        defaultSingleSkuName: {
            Type: String,
            default: '默认'
        },
        // 模式 1:都显示  2:只显示购物车 3:只显示立即购买 4:显示缺货按钮 默认 1
        mode: {
            Type: Number,
            default: 1
        },
        // 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true
        maskCloseAble: {
            Type: Boolean,
            default: true
        },
        // 顶部圆角值
        borderRadius: {
            Type: [String, Number],
            default: 0
        },
        // 商品缩略图字段名(未选择sku时)
        goodsThumbName: {
            Type: [String],
            default: 'goods_thumb'
        },
        // 商品缩略图背景颜色，如#999999
        goodsThumbBackgroundColor: {
            Type: String,
            default: 'transparent'
        },
        // 最小购买数量 默认 1
        minBuyNum: {
            Type: [Number, String],
            default: 1
        },
        // 最大购买数量 默认 100000
        maxBuyNum: {
            Type: [Number, String],
            default: 100000
        },
        // 步进器步长 默认 1
        stepBuyNum: {
            Type: [Number, String],
            default: 1
        },
        // 是否只能输入 step 的倍数
        stepStrictly: {
            Type: Boolean,
            default: false
        },
        // 自定义获取商品信息的函数,支付宝小程序不支持该属性,请使用localdata属性
        customAction: {
            Type: [Function],
            default: null
        },
        // 本地数据源
        localdata: {
            type: Object
        },
        // 价格的字体颜色
        priceColor: {
            Type: String
        },
        // 立即购买按钮的文字
        buyNowText: {
            Type: String,
            default: '立即购买'
        },
        // 立即购买按钮的字体颜色
        buyNowColor: {
            Type: String
        },
        // 立即购买按钮的背景颜色
        buyNowBackgroundColor: {
            Type: String
        },
        // 加入购物车按钮的文字
        addCartText: {
            Type: String,
            default: '加入购物车'
        },
        // 加入购物车按钮的字体颜色
        addCartColor: {
            Type: String
        },
        // 加入购物车按钮的背景颜色
        addCartBackgroundColor: {
            Type: String
        },
        // 不可点击时,按钮的样式
        disableStyle: {
            Type: Object,
            default: null
        },
        // 按钮点击时的样式
        activedStyle: {
            Type: Object,
            default: null
        },
        // 按钮常态的样式
        btnStyle: {
            Type: Object,
            default: null
        },
        // 是否显示右上角关闭按钮
        showClose: {
            Type: Boolean,
            default: true
        },
        // 关闭按钮的图片地址 https://img.alicdn.com/imgextra/i1/121022687/O1CN01ImN0O11VigqwzpLiK_!!121022687.png
        closeImage: {
            Type: String,
            default:
                ''
        },
        // 是否隐藏库存显示
        hideStock: {
            Type: Boolean,
            default: false
        },
        // 颜色主题
        theme: {
            Type: String,
            default: 'default'
        },
        // 请求中的提示
        actionTips: {
            Type: String,
            default: '请求中...'
        },
        // 默认选中的SKU
        defaultSelect: {
            Type: Object
        },
        // 是否使用缓存
        useCache: {
            Type: Boolean,
            default: true
        },
        /**
         * 默认商品,设置该值可快速展示商品
         * 逻辑: 先展示 defaultGoods 信息,再取数据库,再更新页面(通常为更新库存)
         */
        defaultGoods: {
            Type: Object
        },
        /**
         * 金额是否需要除以100
         * 1:金额会除以100
         * 0:金额不会除以100
         */
        amountType: {
            Type: Number,
            default: 1
        },
        // 每次选择完SKU后，购买数量归1，如果有最小购买数量，则设置为最小购买数量
        selectedInit: {
            Type: Boolean,
            default: false
        },
        // 是否开启底部安全区适配，默认true
        safeAreaInsetBottom: {
            Type: Boolean,
            default: true
        },
    },
    data() {
        return {
            complete: false, // 组件是否加载完成
            goodsInfo: {}, // 商品信息
            isShow: false, // true 显示 false 隐藏
            initKey: true, // 是否需要初始化 true 是 false 否
            // #ifndef MP-BAIDU
            shopItemInfo: {}, // 存放要和选中的值进行匹配的数据（因百度小程序setData不支持中文字段，故不编译shopItemInfo变量）
            // #endif
            selectArr: [], // 存放被选中的值
            subIndex: [], // 是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
            selectShop: {}, // 存放最后选中的商品
            selectNum: this.minBuyNum || 1, // 选中数量
            outFoStock: false, // 是否全部sku都缺货
            openTime: 0,
            themeColor: {
                // 默认主题
                default: {
                    priceColor: 'rgb(254, 86, 10)',
                    buyNowColor: '#ffffff',
                    buyNowBackgroundColor: 'rgb(254, 86, 10)',
                    addCartColor: '#ffffff',
                    addCartBackgroundColor: 'rgb(255, 148, 2)',
                    btnStyle: {
                        color: '#333333',
                        borderColor: '#f4f4f4',
                        backgroundColor: '#ffffff'
                    },
                    activedStyle: {
                        color: 'rgb(254, 86, 10)',
                        borderColor: 'rgb(254, 86, 10)',
                        backgroundColor: 'rgba(254,86,10,0.1)'
                    },
                    disableStyle: {
                        color: '#c3c3c3',
                        borderColor: '#f6f6f6',
                        backgroundColor: '#f6f6f6'
                    }
                },
                // 红黑主题
                'red-black': {
                    priceColor: 'rgb(255, 68, 68)',
                    buyNowColor: '#ffffff',
                    buyNowBackgroundColor: 'rgb(255, 68, 68)',
                    addCartColor: '#ffffff',
                    addCartBackgroundColor: 'rgb(85, 85, 85)',
                    activedStyle: {
                        color: 'rgb(255, 68, 68)',
                        borderColor: 'rgb(255, 68, 68)',
                        backgroundColor: 'rgba(255,68,68,0.1)'
                    }
                },
                // 黑白主题
                'black-white': {
                    priceColor: 'rgb(47, 47, 52)',
                    buyNowColor: '#ffffff',
                    buyNowBackgroundColor: 'rgb(47, 47, 52)',
                    addCartColor: 'rgb(47, 47, 52)',
                    addCartBackgroundColor: 'rgb(235, 236, 242)',
                    // btnStyle:{
                    // 	color:"rgb(47, 47, 52)",
                    // 	borderColor:"rgba(235,236,242,0.5)",
                    // 	backgroundColor:"rgba(235,236,242,0.5)",
                    // },
                    activedStyle: {
                        color: 'rgb(47, 47, 52)',
                        borderColor: 'rgba(47,47,52,0.12)',
                        backgroundColor: 'rgba(47,47,52,0.12)'
                    }
                },
                // 咖啡色主题
                coffee: {
                    priceColor: 'rgb(195, 167, 105)',
                    buyNowColor: '#ffffff',
                    buyNowBackgroundColor: 'rgb(195, 167, 105)',
                    addCartColor: 'rgb(195, 167, 105)',
                    addCartBackgroundColor: 'rgb(243, 238, 225)',
                    activedStyle: {
                        color: 'rgb(195, 167, 105)',
                        borderColor: 'rgb(195, 167, 105)',
                        backgroundColor: 'rgba(195, 167, 105,0.1)'
                    }
                },
                // 浅绿色主题
                green: {
                    priceColor: 'rgb(99, 190, 114)',
                    buyNowColor: '#ffffff',
                    buyNowBackgroundColor: 'rgb(99, 190, 114)',
                    addCartColor: 'rgb(99, 190, 114)',
                    addCartBackgroundColor: 'rgb(225, 244, 227)',
                    activedStyle: {
                        color: 'rgb(99, 190, 114)',
                        borderColor: 'rgb(99, 190, 114)',
                        backgroundColor: 'rgba(99, 190, 114,0.1)'
                    }
                }
            }
        };
    },
    created() {
        let that = this;
        vk = that.vk;
        if (that.valueCom) {
            that.open();
        }
    },
    mounted() { },
    methods: {
        // 初始化
        init(notAutoClick) {
            let that = this;
            // 清空之前的数据
            that.selectArr = [];
            that.subIndex = [];
            that.selectShop = {};
            that.selectNum = that.minBuyNum || 1;
            that.outFoStock = false;
            that.shopItemInfo = {};
            let specListName = that.specListName;
            that.goodsInfo[specListName].map(item => {
                that.selectArr.push('');
                that.subIndex.push(-1);
            });
            that.checkItem(); // 计算sku里面规格形成路径
            that.checkInpath(-1); // 传-1是为了不跳过循环
            if (!notAutoClick) that.autoClickSku(); // 自动选择sku策略
        },
        // 使用vk路由模式框架获取商品信息
        findGoodsInfo(obj = {}) {
            let that = this;
            let { useCache } = obj;
            if (typeof vk == 'undefined') {
                that.toast('custom-action必须是function', 'none');
                return false;
            }
            let { actionTips } = that;
            let actionTitle = '';
            let actionAoading = false;
            if (actionTips !== 'custom') {
                actionTitle = useCache ? '' : '请求中...';
            } else {
                actionAoading = useCache ? false : true;
            }
            vk.callFunction({
                url: that.action,
                title: actionTitle,
                loading: actionAoading,
                data: {
                    goods_id: that.goodsId
                },
                success(data) {
                    that.updateGoodsInfo(data.goodsInfo);
                    // 更新缓存
                    goodsCache[that.goodsId] = data.goodsInfo;
                    that.$emit('update-goods', data.goodsInfo);
                },
                fail() {
                    that.updateValue(false);
                }
            });
        },
        updateValue(value) {
            let that = this;
            if (value) {
                that.$emit('open', true);
                that.$emit('input', true);
                that.$emit('update:modelValue', true);
            } else {
                that.$emit('input', false);
                that.$emit('close', 'close');
                that.$emit('update:modelValue', false);
            }
        },
        // 更新商品信息(库存、名称、图片)
        updateGoodsInfo(goodsInfo) {
            let that = this;
            // goodsInfo.sku_list.map((item, index) => {
            // 	item.sku_name_arr = ["20ml/瓶"];
            // });
            let { skuListName } = that;
            if (JSON.stringify(that.goodsInfo) === '{}' || that.goodsInfo[that.goodsIdName] !== goodsInfo[that.goodsIdName]) {
                that.goodsInfo = goodsInfo;
                that.initKey = true;
            } else {
                that.goodsInfo[skuListName] = goodsInfo[skuListName];
            }
            if (that.initKey) {
                that.initKey = false;
                that.init();
            }
            // 更新选中sku的库存信息
            let select_sku_info = that.getListItem(that.goodsInfo[skuListName], that.skuIdName, that.selectShop[that.skuIdName]);
            Object.assign(that.selectShop, select_sku_info);
            that.defaultSelectSku();
            that.complete = true;
        },
        async open() {
            let that = this;
            that.openTime = new Date().getTime();
            let findGoodsInfoRun = true;
            let skuListName = that.skuListName;
            // 先获取缓存中的商品信息
            let useCache = false;
            let goodsInfo = goodsCache[that.goodsId];
            if (goodsInfo && that.useCache) {
                useCache = true;
                that.updateGoodsInfo(goodsInfo);
            } else {
                that.complete = false;
            }
            if (that.customAction && typeof that.customAction === 'function') {
                try {
                    goodsInfo = await that
                        .customAction({
                            useCache,
                            goodsId: that.goodsId,
                            goodsInfo,
                            close: function () {
                                setTimeout(function () {
                                    that.close();
                                }, 500);
                            }
                        })
                        .catch(err => {
                            setTimeout(function () {
                                that.close();
                            }, 500);
                        });
                } catch (err) {
                    let { message = '' } = err;
                    if (message.indexOf('.catch is not a function') > -1) {
                        that.toast('custom-action必须返回一个Promise', 'none');
                        setTimeout(function () {
                            that.close();
                        }, 500);
                        return false;
                    }
                }
                // 更新缓存
                goodsCache[that.goodsId] = goodsInfo;
                if (goodsInfo && typeof goodsInfo == 'object' && JSON.stringify(goodsInfo) != '{}') {
                    findGoodsInfoRun = false;
                    that.updateGoodsInfo(goodsInfo);
                    that.updateValue(true);
                } else {
                    that.toast('未获取到商品信息', 'none');
                    that.$emit('input', false);
                    return false;
                }
            } else if (typeof that.localdata !== 'undefined' && that.localdata !== null) {
                goodsInfo = that.localdata;
                if (goodsInfo && typeof goodsInfo == 'object' && JSON.stringify(goodsInfo) != '{}') {
                    findGoodsInfoRun = false;
                    that.updateGoodsInfo(goodsInfo);
                    that.updateValue(true);
                } else {
                    that.toast('未获取到商品信息', 'none');
                    that.$emit('input', false);
                    return false;
                }
            } else {
                if (findGoodsInfoRun) that.findGoodsInfo({ useCache });
            }
        },
        // 监听 - 弹出层收起
        close(s) {
            let that = this;
            if (new Date().getTime() - that.openTime < 400) {
                return false;
            }
            if (s == 'mask') {
                if (that.maskCloseAble !== false) {
                    that.$emit('input', false);
                    that.$emit('close', 'mask');
                    that.$emit('update:modelValue', false);
                }
            } else {
                that.$emit('input', false);
                that.$emit('close', 'close');
                that.$emit('update:modelValue', false);
            }
        },
        moveHandle() {
            //禁止父元素滑动
        },
        // sku按钮的点击事件
        skuClick(value, index1, index2) {
            let that = this;
            if (value.ishow) {
                if (that.selectArr[index1] != value.name) {
                    that.$set(that.selectArr, index1, value.name);
                    that.$set(that.subIndex, index1, index2);
                } else {
                    that.$set(that.selectArr, index1, '');
                    that.$set(that.subIndex, index1, -1);
                }
                that.checkInpath(index1);
                // 如果全部选完
                that.checkSelectShop();
            }
        },
        // 检测是否已经选完sku
        checkSelectShop() {
            let that = this;
            // 如果全部选完
            if (that.selectArr.every(item => item != '')) {
                that.selectShop = that.shopItemInfo[that.getArrayToSting(that.selectArr)];
                let stock = that.selectShop[that.stockName];
                if (typeof stock !== 'undefined' && that.selectNum > stock) {
                    that.selectNum = stock;
                }
                if (that.selectNum > that.maxBuyNum) {
                    that.selectNum = that.maxBuyNum;
                }
                if (that.selectNum < that.minBuyNum) {
                    that.selectNum = that.minBuyNum;
                }
                if (that.selectedInit) {
                    that.selectNum = that.minBuyNum || 1;
                }
            } else {
                that.selectShop = {};
            }
        },
        // 检查路径
        checkInpath(clickIndex) {
            let that = this;
            let specListName = that.specListName;
            //console.time('筛选可选路径需要的时间是');
            //循环所有属性判断哪些属性可选
            //当前选中的兄弟节点和已选中属性不需要循环
            let specList = that.goodsInfo[specListName];
            for (let i = 0, len = specList.length; i < len; i++) {
                if (i == clickIndex) {
                    continue;
                }
                let len2 = specList[i].list.length;
                for (let j = 0; j < len2; j++) {
                    if (that.subIndex[i] != -1 && j == that.subIndex[i]) {
                        continue;
                    }
                    let choosed_copy = [...that.selectArr];
                    that.$set(choosed_copy, i, specList[i].list[j].name);
                    let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
                    if (that.shopItemInfo.hasOwnProperty(that.getArrayToSting(choosed_copy2))) {
                        specList[i].list[j].ishow = true;
                    } else {
                        specList[i].list[j].ishow = false;
                    }
                }
            }
            that.$set(that.goodsInfo, specListName, specList);
            // console.timeEnd('筛选可选路径需要的时间是');
        },
        // 计算sku里面规格形成路径
        checkItem() {
            let that = this;
            // console.time('计算有多小种可选路径需要的时间是');
            let { stockName } = that;
            let skuListName = that.skuListName;
            // 去除库存小于等于0的商品sku
            let originalSkuList = that.goodsInfo[skuListName];
            let skuList = [];
            let stockNum = 0;
            originalSkuList.map((skuItem, index) => {
                if (skuItem[stockName] > 0) {
                    skuList.push(skuItem);
                    stockNum += skuItem[stockName];
                }
            });
            if (stockNum <= 0) {
                that.outFoStock = true;
            }
            // 计算有多小种可选路径
            let result = skuList.reduce(
                (arrs, items) => {
                    return arrs.concat(
                        items[that.skuArrName].reduce(
                            (arr, item) => {
                                return arr.concat(
                                    arr.map(item2 => {
                                        // 利用对象属性的唯一性实现二维数组去重
                                        //console.log(1,that.shopItemInfo,that.getArrayToSting([...item2, item]),item2,item,items);
                                        if (!that.shopItemInfo.hasOwnProperty(that.getArrayToSting([...item2, item]))) {
                                            that.shopItemInfo[that.getArrayToSting([...item2, item])] = items;
                                        }
                                        return [...item2, item];
                                    })
                                );
                            },
                            [[]]
                        )
                    );
                },
                [[]]
            );
            // console.timeEnd('计算有多小种可选路径需要的时间是');
        },
        getArrayToSting(arr) {
            let str = '';
            arr.map((item, index) => {
                item = item.replace(/\./g, '。');
                if (index == 0) {
                    str += item;
                } else {
                    str += ',' + item;
                }
            });
            return str;
        },
        // 检测sku选项是否已全部选完,且有库存
        checkSelectComplete(obj = {}) {
            let that = this;
            let clickTime = new Date().getTime();
            if (that.clickTime && clickTime - that.clickTime < 400) {
                return false;
            }
            that.clickTime = clickTime;
            let { selectShop, selectNum, stockText, stockName } = that;
            if (!selectShop || !selectShop[that.skuIdName]) {
                that.toast('请先选择对应规格', 'none');
                return false;
            }
            if (selectNum <= 0) {
                that.toast('购买数量必须>0', 'none');
                return false;
            }
            // 判断库存
            if (selectNum > selectShop[stockName]) {
                that.toast(stockText + '不足', 'none');
                return false;
            }
            if (typeof obj.success == 'function') obj.success(selectShop);
        },
        // 加入购物车
        addCart() {
            let that = this;
            that.checkSelectComplete({
                success: function (selectShop) {
                    selectShop.buy_num = that.selectNum;
                    that.$emit('add-cart', selectShop);
                    that.$emit('cart', selectShop);
                    // setTimeout(function() {
                    // 	that.init();
                    // }, 300);
                }
            });
        },
        // 立即购买
        buyNow() {
            let that = this;
            that.checkSelectComplete({
                success: function (selectShop) {
                    selectShop.buy_num = that.selectNum;
                    that.$emit('buy-now', selectShop);
                    that.$emit('buy', selectShop);
                }
            });
        },
        // 弹窗
        toast(title, icon) {
            uni.showToast({
                title: title,
                icon: icon
            });
        },
        // 获取对象数组中的某一个item,根据指定的键值
        getListItem(list, key, value) {
            let that = this;
            let item;
            for (let i in list) {
                if (typeof value == 'object') {
                    if (JSON.stringify(list[i][key]) === JSON.stringify(value)) {
                        item = list[i];
                        break;
                    }
                } else {
                    if (list[i][key] === value) {
                        item = list[i];
                        break;
                    }
                }
            }
            return item;
        },
        getListIndex(list, key, value) {
            let that = this;
            let index = -1;
            for (let i = 0; i < list.length; i++) {
                if (list[i][key] === value) {
                    index = i;
                    break;
                }
            }
            return index;
        },
        // 自动选择sku前提是只有一组sku,默认自动选择最前面的有库存的sku
        autoClickSku() {
            let that = this;
            let { stockName } = that;
            let skuList = that.goodsInfo[that.skuListName];
            let specListArr = that.goodsInfo[that.specListName];
            if (specListArr.length == 1) {
                let specList = specListArr[0].list;
                for (let i = 0; i < specList.length; i++) {
                    let sku = that.getListItem(skuList, that.skuArrName, [specList[i].name]);
                    if (sku && sku[stockName] > 0) {
                        that.skuClick(specList[i], 0, i);
                        break;
                    }
                }
            }
        },
        // 主题颜色
        themeColorFn(name) {
            let that = this;
            let { theme, themeColor } = that;
            let color = that[name] ? that[name] : themeColor[theme][name];
            return color;
        },
        defaultSelectSku() {
            let that = this;
            let { defaultSelect } = that;
            if (defaultSelect && defaultSelect.sku && defaultSelect.sku.length > 0) {
                that.selectSku(defaultSelect);
            }
        },
        /**
             * 主动方法 - 设置sku
            that.$refs.skuPopup.selectSku({
                sku:["红色","256G","公开版"],
                num:5
            });
             */
        selectSku(obj = {}) {
            let that = this;
            let { sku: skuArr, num: selectNum } = obj;
            let specListArr = that.goodsInfo[that.specListName];
            if (skuArr && specListArr.length === skuArr.length) {
                // 先清空
                let skuClickArr = [];
                let clickKey = true;
                for (let index = 0; index < skuArr.length; index++) {
                    let skuName = skuArr[index];
                    let specList = specListArr[index].list;
                    let index1 = index;
                    let index2 = that.getListIndex(specList, 'name', skuName);
                    if (index2 == -1) {
                        clickKey = false;
                        break;
                    }
                    skuClickArr.push({
                        spec: specList[index2],
                        index1: index1,
                        index2: index2
                    });
                }
                if (clickKey) {
                    that.init(true);
                    skuClickArr.map(item => {
                        that.skuClick(item.spec, item.index1, item.index2);
                    });
                }
            }
            if (selectNum > 0) that.selectNum = selectNum;
        },
        priceFilter(n = 0) {
            let that = this;
            if (typeof n == 'string') {
                n = parseFloat(n);
            }
            if (that.amountType === 0) {
                return n.toFixed(2);
            } else {
                return (n / 100).toFixed(2);
            }
        },
        pushGoodsCache(goodsInfo) {
            let that = this;
            let { goodsIdName } = that;
            goodsCache[goodsInfo[goodsIdName]] = goodsInfo;
        },
        // 用于阻止冒泡
        stop() { },
        // 图片预览
        previewImage() {
            let that = this;
            let { selectShop, goodsInfo, goodsThumbName } = that;
            let src = selectShop.image ? selectShop.image : goodsInfo[goodsThumbName];
            if (src) {
                uni.previewImage({
                    urls: [src]
                });
            }
        },
        getMaxStock() {
            let maxStock = 0;
            let that = this;
            let { selectShop = {}, goodsInfo = {}, skuListName, stockName } = that;
            if (selectShop[stockName]) {
                maxStock = selectShop[stockName];
            } else {
                let skuList = goodsInfo[skuListName];
                if (skuList && skuList.length > 0) {
                    let valueArr = [];
                    skuList.map((skuItem, index) => {
                        valueArr.push(skuItem[stockName]);
                    });
                    let max = Math.max(...valueArr);
                    maxStock = max;
                }
            }
            return maxStock;
        },
        numChange(e) {
            this.$emit("num-change", e.value);
        }
    },
    // 计算属性
    computed: {
        valueCom() {
            // #ifndef VUE3
            return this.modelValue;
            // #endif

            // #ifdef VUE3
            return this.modelValue;
            // #endif
        },
        // 最大购买数量
        maxBuyNumCom() {
            let that = this;
            let maxStock = that.getMaxStock();
            let max = that.maxBuyNum || 100000;
            // 最大购买量不能超过当前商品的库存
            if (max > maxStock) {
                max = maxStock;
            }
            return max;
        },
        // 是否是多规格
        isManyCom() {
            let that = this;
            let { goodsInfo, defaultSingleSkuName, specListName } = that;
            let isMany = true;
            if (
                goodsInfo[specListName] &&
                goodsInfo[specListName].length === 1 &&
                goodsInfo[specListName][0].list.length === 1 &&
                goodsInfo[specListName][0].name === defaultSingleSkuName
            ) {
                isMany = false;
            }
            return isMany;
        },
        // 默认价格区间计算
        priceCom() {
            let str = '';
            let that = this;
            let { selectShop = {}, goodsInfo = {}, skuListName, skuIdName } = that;
            if (selectShop[skuIdName]) {
                str = that.priceFilter(selectShop.price);
            } else {
                let skuList = goodsInfo[skuListName];
                if (skuList && skuList.length > 0) {
                    let valueArr = [];
                    skuList.map((skuItem, index) => {
                        valueArr.push(skuItem.price);
                    });
                    let min = that.priceFilter(Math.min(...valueArr));
                    let max = that.priceFilter(Math.max(...valueArr));
                    if (min === max) {
                        str = min + '';
                    } else {
                        str = `${min} - ${max}`;
                    }
                }
            }
            return str;
        },
        // 库存显示
        stockCom() {
            let str = '';
            let that = this;
            let { selectShop = {}, goodsInfo = {}, skuListName, stockName } = that;
            if (selectShop[stockName]) {
                str = selectShop[stockName];
            } else {
                let skuList = goodsInfo[skuListName];
                if (skuList && skuList.length > 0) {
                    let valueArr = [];
                    skuList.map((skuItem, index) => {
                        valueArr.push(skuItem[stockName]);
                    });
                    let min = Math.min(...valueArr);
                    let max = Math.max(...valueArr);
                    if (min === max) {
                        str = min;
                    } else {
                        str = `${min} - ${max}`;
                    }
                }
            }
            return str;
        }
    },
    watch: {
        valueCom(newVal, oldValue) {
            let that = this;
            if (newVal) {
                that.open();
            }
        },
        defaultGoods: {
            immediate: true,
            handler: function (newVal, oldValue) {
                let that = this;
                let { goodsIdName } = that;
                if (typeof newVal === 'object' && newVal && newVal[goodsIdName] && !goodsCache[newVal[goodsIdName]]) {
                    that.pushGoodsCache(newVal);
                }
            }
        }
    }
};
</script>

<style lang="scss" scoped>
/*  sku弹出层 */
.vk-data-goods-sku-popup {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    overflow: hidden;

    &.show {
        display: block;

        .mask {
            animation: showPopup 0.2s linear both;
        }

        .layer {
            animation: showLayer 0.2s linear both;
            bottom: var(--window-bottom);
        }
    }

    &.hide {
        .mask {
            animation: hidePopup 0.2s linear both;
        }

        .layer {
            animation: hideLayer 0.2s linear both;
        }
    }

    &.none {
        display: none;
    }

    .mask {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .layer {
        display: flex;
        width: 100%;
        // height: 1014rpx;
        flex-direction: column;
        // min-height: 40vh;
        // max-height: 1014rpx;
        position: fixed;
        z-index: 99;
        bottom: 0;
        border-radius: 10rpx 10rpx 0 0;
        background-color: #fff;

        .specification-wrapper {
            width: 100%;
            padding: 30rpx 25rpx;
            box-sizing: border-box;

            .specification-wrapper-content {
                width: 100%;
                max-height: 900rpx;
                min-height: 300rpx;

                &::-webkit-scrollbar {
                    /*隐藏滚轮*/
                    display: none;
                }

                .specification-header {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    position: relative;
                    margin-bottom: 40rpx;

                    .specification-left {
                        width: 180rpx;
                        height: 180rpx;
                        flex: 0 0 180rpx;

                        .product-img {
                            width: 180rpx;
                            height: 180rpx;
                        }
                    }

                    .specification-right {
                        flex: 1;
                        padding: 0 35rpx 0 28rpx;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        font-weight: 500;

                        .price-content {
                            color: #fe560a;
                            margin-bottom: 20rpx;

                            .sign {
                                font-size: 28rpx;
                            }

                            .price {
                                margin-left: 4rpx;
                                font-size: 48rpx;
                            }

                            .price2 {
                                margin-left: 4rpx;
                                font-size: 36rpx;
                            }
                        }

                        .inventory {
                            font-size: 24rpx;
                            color: #999999;
                            margin-bottom: 14rpx;
                        }

                        .choose {
                            font-size: 28rpx;
                            color: #333333;
                        }
                    }
                }

                .specification-content {
                    font-weight: 500;

                    .specification-item {
                        margin-bottom: 40rpx;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .item-title {
                            margin-bottom: 20rpx;
                            font-size: 28rpx;
                            color: #999999;
                        }

                        .item-wrapper {
                            display: flex;
                            flex-direction: row;
                            flex-flow: wrap;

                            .item-content {
                                display: inline-block;
                                padding: 10rpx 35rpx;
                                font-size: 24rpx;
                                border-radius: 10rpx;
                                background-color: #ffffff;
                                color: #333333;
                                margin-right: 20rpx;
                                margin-bottom: 16rpx;
                                border: 1px solid #f4f4f4;
                                box-sizing: border-box;

                                &.actived {
                                    border-color: #fe560a;
                                    color: #fe560a;
                                }

                                &.noactived {
                                    background-color: #f6f6f6;
                                    border-color: #f6f6f6;
                                    color: #c3c3c3;
                                }
                            }
                        }
                    }

                    .number-box-view {
                        display: flex;
                        padding-top: 30rpx;
                    }
                }
            }

            .close {
                position: absolute;
                top: 30rpx;
                right: 25rpx;
                width: 50rpx;
                height: 50rpx;
                text-align: center;
                line-height: 50rpx;

                .close-item {
                    width: 50rpx;
                    height: 50rpx;
                }
            }
        }

        .btn-wrapper {
            display: flex;
            width: 100%;
            height: 120rpx;
            flex: 0 0 120rpx;
            align-items: center;
            justify-content: space-between;
            padding: 0 26rpx;
            box-sizing: border-box;

            .layer-btn {
                width: 335rpx;
                height: 76rpx;
                border-radius: 38rpx;
                color: #fff;
                line-height: 76rpx;
                text-align: center;
                font-weight: 500;
                font-size: 28rpx;

                &.add-cart {
                    background: #ffbe46;
                }

                &.buy {
                    background: #fe560a;
                }
            }

            .sure {
                width: 698rpx;
                height: 68rpx;
                border-radius: 38rpx;
                color: #fff;
                line-height: 68rpx;
                text-align: center;
                font-weight: 500;
                font-size: 28rpx;
                background: #fe560a;
            }

            .sure.add-cart {
                background: #ff9402;
            }
        }

        .btn-wrapper.safe-area-inset-bottom {
            padding-bottom: 0;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    @keyframes showPopup {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes hidePopup {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes showLayer {
        0% {
            transform: translateY(120%);
        }

        100% {
            transform: translateY(0%);
        }
    }

    @keyframes hideLayer {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(120%);
        }
    }
}
</style>
